<template>
	<view class="wrap" :style="'background-image: url('+topBg+')'">
		<view class="logo">
			<image src="/static/imgs/login-title.png" mode="widthFix"></image>
		</view>
		<view class="main">
			<template v-if="loginMethod === 'phone_captcha'">
				<view class="form">
					<view class="b-row">
						<view class="b-input">
							<view class="s-icon iconfont icon-phone"></view>
							<input type="text" :value="formData.phone" @input="onInputText" data-field="phone"
								placeholder="输入手机号" />
						</view>
					</view>
					<view class="b-row">
						<view class="b-input">
							<view class="s-icon iconfont icon-password"></view>
							<input type="text" :value="formData.captcha" @input="onInputText" data-field="captcha"
								placeholder="输入验证码" />
							<view class="s-captcha" :class="{ disable: captcha.second > 0 }" @click="onPhoneCaptcha">
								<text v-if="!captcha.retry && !captcha.second">获取验证码</text>
								<text v-else-if="captcha.second > 0">重新获取 {{ captcha.second }}秒</text>
								<text v-else-if="captcha.retry">重新获取</text>
							</view>
						</view>
					</view>
				</view>
				<view class="submit" :class="{ disable: disable.submit }" @click="onLoginByPhoneCaptcha">立即登录</view>
				<view class="reg-tips">未注册的手机号验证通过后会自动注册</view>
			</template>
			<!-- #ifdef  MP-WEIXIN -->
			<button class="submit f-wechat open-data-btn" open-type="getPhoneNumber" @getphonenumber="onGetPhoneNumber"
				v-if="loginMethods.length === 1 && loginMethod === 'wechat_phone'">手机号快捷登录</button>
			<view class="other" v-if="showOtherMethods">
				<view class="split">
					<view class="s-line"></view>
					<view class="s-text">其他登录方式</view>
					<view class="s-line"></view>
				</view>
				<view class="login-method">
					<!-- #ifdef  MP-WEIXIN -->
					<button class="b-method f-wechat open-data-btn" open-type="getPhoneNumber"
						@getphonenumber="onGetPhoneNumber" v-if="loginMethods.indexOf('wechat_phone') !== -1">
						<view class="iconfont icon-phone"></view>
						<view class="s-text">手机号快捷登录</view>
					</button>
					<!-- #endif -->
				</view>
			</view>
			<!-- #endif -->
			<view class="tips" v-if="loginNote">{{loginNote}}</view>
		</view>
	</view>
</template>

<script>
	import {
		loginByPhoneCaptcha,
		loginByWechatPhone,
		sendPhoneCaptcha
	} from '@/service/api/user.js'
	import {
		decodeRedirectUrl
	} from '@/common/util'
	import mixinsCommon from '@/mixins/common.js'
	export default {
		mixins: [mixinsCommon],
		data() {
			return {
				formData: {
					phone: '',
					captcha: '',
				},
				loginMethod: 'phone_captcha',
				disable: {
					captcha: false,
					submit: false
				},
				captcha: {
					retry: false,
					second: 0,
				}
			}
		},
		onLoad(options) {
			this.returnPage = options.from ? decodeRedirectUrl(options.from) : '/pages/home/index'
			console.log('login returnPage', this.returnPage)
		},
		computed: {
			topBg() {
				return this.$store.getters.globalConfig.style_login_bg || ''
			},
			loginMethods() {
				let loginMethods = this.$store.getters.globalConfig.login_methods || []
				if (loginMethods.length > 0) {
					this.loginMethod = loginMethods[0]
					console.log('this.loginMethod')
				}

				return loginMethods
			},
			loginNote() {
				return this.$store.getters.globalConfig.login_note || ''
			},
			showOtherMethods() {
				let show = this.loginMethods.length >= 2
				// #ifndef MP-WEIXIN
				show = this.loginMethods.length >= 3 ||
					(this.loginMethods.length === 2 && this.loginMethods.indexOf('wechat_phone') === -1)
				// #endif

				return show
			}
		},
		methods: {
			onInputText(e) {
				console.log('onInputText', e)
				this.formData[e.target.dataset.field] = e.detail.value;
			},
			onChangeMethod(method) {
				this.loginMethod = method
			},
			onPhoneCaptcha() {
				if (this.disable.captcha) {
					return
				}
				if (!this.formData.phone) {
					return this.$logic.showToast('手机号不能为空')
				}
				this.disable.captcha = true
				uni.login().then(([err, res]) => {
					console.log('uni.login', err, res)
					sendPhoneCaptcha(this.formData.phone, res ? res.code : '', true).then(([err, res]) => {
						console.log('sendPhoneCaptcha', err, res)
						if (!err) {
							uni.showToast({
								title: '发送成功'
							})

							// 验证码倒计时
							this.captcha.second = 60
							var interval = setInterval(() => {
								this.captcha.second--
							}, 1000)
							setTimeout(() => {
								clearInterval(interval)
								this.captcha.retry = true
								this.captcha.second = 0
								this.disable.captcha = false
							}, this.captcha.second * 1000)
						} else {
							this.disable.captcha = false
						}
					})
				})
			},
			onLoginByPhoneCaptcha() {
				if (this.disable.submit) {
					return
				}
				if (!this.formData.phone) {
					return this.$logic.showToast('手机号不能为空')
				}
				if (!this.formData.captcha) {
					return this.$logic.showToast('验证码不能为空')
				}
				this.disable.submit = true
				uni.login().then(([err, res]) => {
					console.log('uni.login', err, res)
					loginByPhoneCaptcha(this.formData.phone, this.formData.captcha, res ? res.code : '',
						this.$store.getters.mpOpenid).then(([err, res]) => {
						console.log('loginByPhoneCaptcha', err, res)
						this.disable.submit = false
						if (!err) {
							this.$store.commit('setAccessToken', res.token)
							this.$logic.showToast('登录成功').then(([err, res]) => {
								uni.reLaunch({
									url: this.returnPage
								})
							})
						}
					})
				})
			},
			onGetPhoneNumber(e) {
				console.log('onGetPhoneNumber', e)
				if (e.detail.errMsg.indexOf(':ok') === -1) {
					// fail user deny
					// this.$logic.showToast(e.detail.errMsg.replace('getPhoneNumber:', ''))
					return
				}
				uni.showLoading({
					title: '尝试登录中'
				})
				uni.login().then(([err, res]) => {
					console.log('uni.login', err, res)
					loginByWechatPhone(e.detail.encryptedData, e.detail.iv, e.detail.code || '',
						res ? res.code : '').then(([err, res]) => {
						console.log('loginByWechatPhone', err, res)
						uni.hideLoading()
						if (!err) {
							this.$store.commit('setAccessToken', res.token)
							this.$logic.showToast('登录成功').then(([err, res]) => {
								uni.reLaunch({
									url: this.returnPage
								})
							})
						}
					})
				})
			}
		}
	}
</script>

<style lang="scss">
	page {
		padding-bottom: env(safe-area-inset-bottom);
		background: #ffffff;
	}

	.wrap {
		padding-top: 500upx;
		width: 750upx;
		height: 800upx;
		// background-image: url('/static/imgs/login-bg.png');
		background-repeat: no-repeat;
		background-size: contain;
		position: relative;
	}

	.logo {
		position: absolute;
		top: 286upx;
		left: 61upx;
		width: 188upx;
		height: 100upx;

		image {
			width: 100%;
			height: 100%;
		}
	}

	.main {
		padding: 50upx;
	}

	.form {
		.b-row {
			display: flex;
			align-items: center;
			justify-content: space-between;
			margin-bottom: 30upx;
			border-bottom: 1upx solid #E5E5E5;
		}

		.b-input {
			flex: 1;
			padding: 0 20upx;
			width: 100%;
			height: 90upx;
			display: flex;
			align-items: center;

			.s-icon {
				color: $pq-minor-color;
				font-size: 40upx;
			}

			input {
				margin-left: 30upx;
				flex: 1;
				color: $pq-main-color;
				font-size: 28upx;
			}

			.s-captcha {
				padding: 0 30upx;
				border-left: 2upx #ccc solid;
				// background: #fff;
				// height: 64upx;
				// line-height: 64upx;
				// border-radius: 32upx;
				color: $pq-main-color;
				font-size: 24upx;

				&.disable {
					color: $pq-minor-color;
				}
			}
		}
	}

	.submit {
		margin-top: 80upx;
		height: 100upx;
		line-height: 100upx;
		text-align: center;
		color: #fff;
		font-size: 32upx;
		background: $pq-main-color;
		border-radius: 50upx;
		letter-spacing: 10upx;

		&.f-wechat {
			background: #35C773;
		}

		&.disable {
			background: rgba($color: $pq-main-color, $alpha: 0.2);
		}
	}

	.reg-tips {
		margin-top: 40upx;
		color: $pq-minor-color;
		font-size: 24upx;
		text-align: center;
	}

	.split {
		margin-top: 50upx;
		display: flex;
		align-items: center;
		justify-content: space-between;

		.s-line {
			width: 200upx;
			height: 1upx;
			background: #eee;
		}

		.s-text {
			font-size: 28upx;
			color: $pq-minor-color;
		}
	}

	.login-method {
		margin-top: 30upx;
		display: flex;
		align-items: center;
		justify-content: center;
		flex-wrap: wrap;

		.b-method {
			margin: 0 20upx 20upx 20upx;
			width: 250upx;
			// padding: 0 20upx;
			height: 80upx;
			border-radius: 10upx;
			background: #808080;
			display: flex;
			justify-content: center;
			align-items: center;
			color: #fff;

			&.f-number {
				background: #EE6C77;
			}

			&.f-phone {
				background: #FF9C45;
			}

			&.f-wechat {
				background: #35C773;
			}

			.iconfont {
				margin-right: 10upx;
				font-size: 40upx;
			}

			.s-text {
				font-size: 26upx;
			}
		}
	}

	.tips {
		margin-top: 50upx;
		width: 100%;
		color: $pq-main-color;
		font-size: 24upx;
		text-align: center;
	}
</style>